<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  div {
    width: 800px;
    height: 700px;
    margin:0 auto
  }
</style>

<body>
<div style="text-align: center">
  <img src="./img/1.webp" style="width: 800px; height:700px">
</div>
<script>
  //HTMLCollection数组
  var img = document.getElementsByTagName('img')[0];
  const imgArr = ['1.webp', '2.webp', '3.webp'];
  var count = 0;

  //只执行一次
  function fn() {
    if(count<2){
      count++;
    }else{
      count = 0;
    }

    img.src = './img/' + imgArr[count];
    //n! 递归(调用函数本身): 出口， 表达式
    return setTimeout(fn, 1000);
  }
  setTimeout(fn, 1000);
</script>

</body>
</html>